<script setup>
import { reactive, ref, shallowRef } from 'vue'
import ComA from './ComA.vue'
import ComB from './ComB.vue'
import ComC from './ComC.vue'

const current = ref(ComA)


const components = reactive([
  {id:'A',component:ComA},
  {id:'B',component:ComB},
  {id:'C',component:ComC},
])


</script>

<template>
  <div class="demo">
    <!-- <label><input type="radio" v-model="current" :value="ComA" /> A</label>
    <label><input type="radio" v-model="current" :value="ComB" /> B</label>
    <label><input type="radio" v-model="current" :value="ComC" /> C</label>
    <KeepAlive include="ComA,ComB">
      <component :is="current"></component>
    </KeepAlive> -->

    <KeepAlive >
      <component  :is="item.component" v-for="item in components"  :key="item.id">
      </component>
    </KeepAlive> 
  </div>
</template>